<template>
  <div class="wechatPayment-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>财务中心</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/cost' }">费用中心</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/invoice' }">发票申请</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="wechatPayment-content">
      <div class="title">
        发票申请
      </div>
      <div class="first">
        <div class="dfsb">
          <div class="left">
            <el-button round :color="type == 1 ? '#0071bb' : ''" @click="changeTab(1)">申请开票</el-button>
            <el-button round :color="type == 2 ? '#0071bb' : ''" @click="changeTab(2)">开票记录</el-button>
          </div>
          <span class="text" @click="onShow()">发票抬头管理</span>
        </div>
        <div class="desc" v-if="type == 1">
          <div class="item">
            1、支持普通发票和增值税发票，3月1号之后申请的普通发票，不再开具纸质发票，将会以电子票的形式上传至后台
          </div>
          <div class="item">
            2、单次开票金额必须大于120.00元
          </div>
          <div class="item">
            3、请确认开票信息，发票开出后不予重开
          </div>
        </div>
        <div class="desc" v-if="type == 2">
          提示：3月1号之后申请的普通发票，审核通过后出现【下载电子票】的按钮
        </div>
      </div>
      <div class="second" v-if="type == 1">
        <div class="btn">
          <el-button round :color="billType == 1 ? '#0071bb' : ''" @click="changeType(1)">普通发票</el-button>
          <el-button round :color="billType == 2 ? '#0071bb' : ''" @click="changeType(2)">增值税专用发票</el-button>
        </div>
        <div class="desc">
          提示：您选择的是增值税普通发票，系统会开具电子票上传至后台，开出后可在发票记录中下载打印
        </div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" style="width:400px">
          <el-form-item label="发票抬头" prop="name">
            <div class="info">
              <img src="/src/assets/finance/edit.png" alt="" style="width:20px;cursor: pointer;">
              点击完善发票抬头信息
            </div>
          </el-form-item>
          <el-form-item label="发票金额：" prop="money">
            <!-- <span class="num">¥ 00.00</span> -->
            <span class="num">{{ ruleForm.money ? ruleForm.money : '¥ 00.00' }}</span>
            <el-button round color="#0071bb" @click="onInvoiceOrder()">选择开票订单</el-button>
          </el-form-item>
          <el-form-item label="发票金额：" v-if="billType == 2" prop="money">
            <!-- <span></span> -->
            <el-button round style="color:#0071bb;border-color: #0071bb;">乐汇园智能零售终端软件10.1</el-button>
          </el-form-item>
          <el-form-item label="收货人：" prop="by">
            <el-input placeholder="请输入收货人姓名" v-model="ruleForm.by"></el-input>
          </el-form-item>
          <el-form-item label="手机号：" v-if="billType == 2" prop="tel">
            <el-input placeholder="请输入收货人手机号" v-model="ruleForm.tel"></el-input>
          </el-form-item>
          <el-form-item label="省市区：" v-if="billType == 2" prop="city">
            <el-select placeholder="请选择收货地址的省市区" v-model="ruleForm.city">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址：" v-if="billType == 2" prop="address">
            <el-input placeholder="请输入收货人详细地址" v-model="ruleForm.address"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="type == 1">
        <el-button round color="#0071bb" @click="onInvoice(ruleFormRef)">申请开票</el-button>
      </div>
      <div v-if="type == 2">
        <!-- 表格 -->
        <div class="content tables">
          <div class="search">
            <el-form :inline="true" :model="formInline" style="width:100%;display: flex;">
              <el-form-item label="时间段">
                <el-time-picker v-model="formInline.time" is-range range-separator="-" start-placeholder="开始时间"
                  end-placeholder="结束时间" />
              </el-form-item>
              <el-form-item label="订单编号">
                <el-input v-model="formInline.no" placeholder="请输入订单编号"></el-input>
              </el-form-item>
              <span class="btn">
                <el-button round color="#0071bb" :icon="Search">搜索</el-button>
                <el-button round :icon="RefreshLeft">重置</el-button>
                <el-dropdown :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <el-button round color="#0071bb" :icon="Setting" style="margin:0 10px">筛选</el-button> </span>
                  <template #dropdown>
                    <el-dropdown-menu style="max-height:300px">
                      <el-dropdown-item v-for="(item, index) in checkArr" :key="index"
                        @click.stop="filterTableData(item)">
                        <el-checkbox v-model="item.show" size="large" :label="item.label" />
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <el-button round :icon="Refresh">刷新</el-button>
              </span>
            </el-form>
          </div>
          <el-table :data="tableData" style="width: 100%">
            <!-- 动态表头 -->
            <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in headerArr" :key="index">
              <template #default="scope" v-if="item.prop == 'price'">
                <span>¥ {{ scope.row.price }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <span style="color:#0071BB;cursor: pointer;">下载电子档</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 底部分页 -->
        <div class="page_number">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size" :disabled="disabled"
            layout="prev, pager, next, jumper,total" :total="10" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
    <!-- 发票管理 -->
    <Invoice v-if="showInvoice" :formData="{}" @close="onClose()" @submit="onSubmit()"></Invoice>
    <!-- 选择开票订单 -->
    <InvoiceOrder v-if="showInvoiceOrder" :formData="{}" @close="onCloseInvoiceOrder()" @submit="onSubmitInvoiceOrder">
    </InvoiceOrder>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { FormInstance, FormRules } from 'element-plus'
import Invoice from './components/invoice.vue'
import InvoiceOrder from './components/invoiceOrder.vue'
import { Search, Plus, Refresh, HelpFilled, Setting } from '@element-plus/icons-vue'
interface RuleForm {
  name: string,
  money: number | null,
  by: string,
  tel: string,
  city: string,
  address: string
}
// 搜索条件
const formInline = ref({
  time: '',
  no: ''
})
// 表单
const ruleForm = ref<RuleForm>({
  name: '',
  money: null,
  by: '',
  tel: "",
  city: '',
  address: ''
})
// 表格数据
const tableData = ref([
  {
    id: 1,
    applyTime: '2024-05-10',
    money: '1066.00',
    type: '普通发票',
    status: '已开具',
    address: '地址',
    remark: '6541646',
  },
  {
    id: 2,
    applyTime: '2024-05-10',
    money: '1066.00',
    type: '普通发票',
    status: '已开具',
    address: '地址',
    remark: '6541646',
  },
  {
    id: 3,
    applyTime: '2024-05-10',
    money: '1066.00',
    type: '普通发票',
    status: '已开具',
    address: '地址',
    remark: '6541646',
  }
])
const ruleFormRef = ref<FormInstance>()
const rules = ref<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请完善抬头信息', trigger: 'blur' }
  ],
  money: [
    { required: true, message: '请选择开票订单，且数额不能小于120元', trigger: 'blur' }
  ],
  by: [
    { required: true, message: '请输入收货人姓名', trigger: 'blur' }
  ],
  tel: [
    { required: true, message: '请输入收货人手机号', trigger: 'blur' }
  ],
  city: [
    { required: true, message: '请选择收货地址的省市区', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入收货人详细地址', trigger: 'blur' }
  ],
})
const type = ref(1)
// 申请开票：1 开票记录：2 
const changeTab = (val: number) => {
  type.value = val
}
// 普通开票：1 增值税专用发票：2 
const billType = ref(1)
const changeType = (val: number) => {
  billType.value = val
}
// 申请开票
const onInvoice = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 发片管理弹窗
const showInvoice = ref(false)
const onShow = () => {
  showInvoice.value = true
}
// 提交
const onSubmit = () => {
  showInvoice.value = false
}
// 关闭提现弹窗
const onClose = () => {
  showInvoice.value = false
}
const showInvoiceOrder = ref(false)
// 点击开票订单
const onInvoiceOrder = () => {
  showInvoiceOrder.value = true
}
const onCloseInvoiceOrder = () => {
  showInvoiceOrder.value = false
}
// 提交
const onSubmitInvoiceOrder = (total: number) => {
  console.log(total, '-----收到总数据----');
  ruleForm.value.money = total
  showInvoiceOrder.value = false
}
// 选中的属性
const checkArr = ref<any>([
  { label: '申请时间', prop: 'applyTime', show: true },
  { label: '发票金额', prop: 'money', show: true },
  { label: '发票类型', prop: 'type', show: true },
  { label: '状态', prop: 'status', show: true },
  { label: '快递信息', prop: 'address', show: true },
  { label: '备注', prop: 'remark', show: true },
])
// 表头
const headerArr = ref<any>([
  { label: '申请时间', prop: 'applyTime', show: true },
  { label: '发票金额', prop: 'money', show: true },
  { label: '发票类型', prop: 'type', show: true },
  { label: '状态', prop: 'status', show: true },
  { label: '快递信息', prop: 'address', show: true },
  { label: '备注', prop: 'remark', show: true },
])
// 点击触发方法
const filterTableData = (item: any) => {
  setTimeout(() => {
    headerArr.value = checkArr.value.filter((item: any) => item.show == true)
  }, 500)
}
</script>

<style scoped lang="scss">
.wechatPayment-page {
  padding: 20px 10px;
  box-sizing: border-box;
  background-color: #f1f1f1;
}

.wechatPayment-content {
  padding: 10px;
  background: #fff;
  margin-top: 20px;
  border-radius: 4px;
}

.dfsb {
  display: flex;
  justify-content: space-between;
}

.title {
  color: #4D4D4D;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 10px;
}

.desc {
  background: #00ffff;
  padding: 10px;
  color: #4D4D4D;
  margin-top: 10px;
  font-size: 12px;

  .item {
    height: 30px;
    line-height: 30px;
  }
}

.second {
  margin-top: 10px;
}

.info {
  color: #0000FF;
  display: flex;
  align-items: center;
}

.num {
  color: #B2B2B2;
  margin-right: 10px;
}

.soft {
  color: #0071BB;
  border: 1px solid #0071BB;
  border-radius: 20px;
  padding: 0 10px;
}

.content {
  margin: 10px 0;
}

.text {
  color: #0000FF;
  margin-right: 10px;
  cursor: pointer;
}
</style>